<template>
	<view>
		<view class="container">
			<headerView :title='title' :backBtn="true"></headerView>
			<!-- tab选择 -->
			<view class="tab-container">
				<view :class="['tab-item', { 'tab-item-active': selectTabIndex === index }]"
					v-for="(tab, index) in tabOptions" :key="index" @click="selectTab(index)">
					{{ tab.title }}
				</view>
			</view>

			<!-- 商家内容 -->
			<view class="merchant" v-if="merchantData.length">
				<view class="businesses-item" v-for="(merchant, index) in merchantData" :key="merchant.id">
					<image class="item-left-image" :src="merchant.logo" mode=""></image>
					<view class="item-center-text">
						<view class="item-title">{{ merchant.title }}</view>
						<view class="item-phone">
							<image src="http://139.159.229.212:8889/index/fujiajia/phone.png" mode=""></image>
							{{ merchant.tel }}
						</view>
						<view class="item-buy">
							<view class="money-box">
								<image src="http://139.159.229.212:8889/index/fujiajia/定位.png" mode=""></image>
							</view>
							<view class="money-data">{{ merchant.address }}</view>
						</view>
					</view>
					<view class="item-right-icon">
						<image class="icon-red" src="http://139.159.229.212:8889/index/fujiajia/红包.png" mode="aspectFill"></image>
						<view class="address">
							<!-- <image class="icon-address" src="http://139.159.229.212:8889/index/fujiajia/定位.png" mode="aspectFill"></image> -->
							{{ merchant.distance }}
						</view>
					</view>
				</view>
			</view>

			<!-- 底部tabbar -->
			<tabBar :selectIndex="selectIndex"></tabBar>
		</view>
	</view>
</template>

<script>
import headerView from "../components/header/header.vue";
import tabBar from "../components/tabBar/index.vue";
import api from "@/api/";

export default {
	components: {
		headerView,
		tabBar
	},
	data() {
		return {
			title: "店铺列表",
			tabOptions: [],
			selectTabIndex: 0,
			merchantData: [],
			longitude:0,
			latitude:0,
			locationRes: { longitude: null, latitude: null },
			page: 1,
			loadingStatus: "more"
		};
	},
	async created() {
		// 确保先获取经纬度，再执行其他操作
		await this.getLocation();
		await this.getCategories();
		await this.getMerchantList();
	},
	methods: {
	  // 获取当前位置
	  async getLocation() {
	    await uni.getLocation({
	      success: (result) => {
	        this.latitude = result.latitude;
	        this.longitude = result.longitude;
	        console.log("获取到的位置：", this.latitude, this.longitude);
	      },
	      fail: (error) => {
	        console.error("获取位置失败", error);
	      }
	    });
	  },
	
	  // 获取分类信息
	  async getCategories() {
	    try {
	      const res = await api.cateList();
	      if (res.code === 1) {
	        this.tabOptions = res.data.list;
	        // console.log("获取的分类列表:", this.tabOptions);  // 打印分类信息，确认是否正确
	      }
	    } catch (error) {
	      console.error("获取分类失败", error);
	    }
	  },
	
	  // 获取商家列表
	  async getMerchantList() {
	    const categoryId = this.tabOptions[this.selectTabIndex]?.id;
	    // console.log("当前选择的分类 id:", categoryId);  // 打印 categoryId，检查其是否正确
	    if (!categoryId) {
	      console.error("categoryId 为空");
	      return;
	    }
	
	    // if (this.loadingStatus === "noMore") return;
	    this.loadingStatus = "loading";
	
	    try {
	      const res = await api.shopList({
	        page: this.page,
	        cid: categoryId,
	        lng: this.longitude,
	        lat: this.latitude
	      });
	
	      if (res.code === 1) {
	        this.merchantData = this.page === 1 ? res.data.list : [...this.merchantData, ...res.data.list];
	        this.loadingStatus = res.data.list.length ? "more" : "noMore";
	      }
	    } catch (error) {
	      console.error("获取商家列表失败", error);
	      this.loadingStatus = "more";
	    }
	  },
	
	  // 选择 tab 时获取商家列表
	  async selectTab(index) {
	    console.log("切换 tab 的索引：", index);  // 打印当前点击的 tab 索引
	    if (!this.tabOptions.length) await this.getCategories();  // 如果分类为空，先获取分类
	    this.selectTabIndex = index;  // 更新当前选中的 tab 索引
	    this.page = 1;
	    this.merchantData = [];  // 清空当前商家数据
	
	    await this.getMerchantList();  // 确保重新获取商家列表
	  }
	}

};
</script>


<style lang="less" scoped>
	.tab-container {
		display: flex;
		height: 100rpx;
		background-color: #fff;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;

		&::-webkit-scrollbar {
			height: 0;
		}

		.tab-item {
		    font-size: 30rpx;
		    padding: 0 20rpx;
		    min-width: auto; // 让宽度自适应内容
		    height: 100%;
		    line-height: 100rpx;
		    cursor: pointer;
		    position: relative;
		    text-align: center;
		    display: inline-block;
		    white-space: nowrap; // 避免换行
		    flex-shrink: 0; // 防止压缩导致重叠
		
		    &.tab-item-active {
		        color: #f76e00;
		
		        &::before {
		            content: "";
		            position: absolute;
		            left: 0;
		            bottom: 0%;
		            width: 100%;
		            height: 6rpx;
		            background-color: #ffd1aa;
		        }
		    }
		}

	}

	.merchant {
		.businesses-item {
			width: 100%;
			height: 204rpx;
			background-color: #fff;
			border-radius: 26rpx;
			margin-top: 20rpx;
			padding: 20rpx;
			display: flex;

			.item-left-image {
				width: 169rpx;
				height: 169rpx;
				border-radius: 26rpx;
			}

			.item-center-text {
				padding: 0 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.item-phone {
					display: flex;
					align-items: center;
					color: #7b7b7b;
					padding-top: 14rpx;

					image {
						width: 23rpx;
						height: 23rpx;
					}
				}

				.item-buy {
					display: flex;
					align-items: center;

					.money-box {
						width: 44rpx;
						height: 44rpx;
						// background-color: #ff9b45;
						display: flex;
						justify-content: center;
						align-items: center;
						border-bottom-left-radius: 6rpx;
						border-top-left-radius: 6rpx;

						image {
							width: 29rpx;
							height: 29rpx;
						}
					}

					.money-data {
						height: 40rpx;
						width: 350rpx;
						text-align: left;
						border-bottom-right-radius: 6rpx;
						border-top-right-radius: 6rpx;
						overflow: hidden;
						// color: #ff9b45;
						// background-color: rgba(255, 155, 69, 0.2);
					}
				}
			}

			.item-right-icon {
				margin-left: auto;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.icon-red {
					width: 40rpx;
					height: 90rpx;
					margin-left: auto;
					margin-top: -10rpx;
				}

				.address {
					height: 45rpx;
					display: flex;
					align-items: center;
					color: #8a8a8a;

					image {
						height: 44rpx;
						width: 44rpx;
					}
				}
			}
		}
	}
</style>